<template>
	<div class="appdownload" v-show="showDownLoad">
		<div class="logo"><img src="../../assets/yryz@3x.png" ></div>
		<div class="right">
			<!-- <button class="btn" :copy-conent="clipboardUrl">查看更多精彩内容</button> -->
			<button class="btn" @click="handleClick">打开APP</button>
			<!-- <div class="iconfont icon-close" @click="handleShowDownLoad"></div> -->
		</div>
	</div>
</template>
<script>
	const ua = window.navigator.userAgent;
	import Clipboard  from 'clipboard';
	import nativeSchema from '../../js/tool-native-schema';
	export default {
		name: 'y-downLoadApp',
		props: {
			id: '',
			routerAddr: '',
		},
		data() {
			return {
				showDownLoad: true,
				clipboardUrl: '',
			}
		},
		methods: {
			handleClick() {
				// window.location.href = window.location.origin + '/static/page/download.html';
				if (this.hasClickOnce)
					return;
				this.hasClickOnce = true;
				if (ua.toLowerCase().match(/micromessenger/i) || ua.toLowerCase().match(/WeiBo/i)) {
					this.$emit('handleShowTips');
				} else {
					this.openApp()
				}
			},

			openApp() {
				nativeSchema.loadSchema({
					// 某个schema协议，例如login,
					schema: ua.indexOf('Android') > -1 ? `open/${this.routerAddr}/${this.id}` :  `${this.routerAddr}/${this.id}`,
					// schema头协议，
					protocal: "yryzapp",
					// 发起唤醒请求后，会等待loadWaiting时间，超时则跳转到failUrl，默认3000ms
					loadWaiting: 3000,
					// 唤起失败时的跳转链接，默认跳转到应用商店下载页
					// failUrl: ua.indexOf('Android') > -1 ? "http://android.myapp.com/myapp/detail.htm?apkName=com.rz.rz_rrz&ADTAG=mobile" : 'https://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=1108712331',
					failUrl: window.location.href = window.location.origin + '/static/page/download.html'
				});
			},
			// handleShowDownLoad() {
			// 	this.showDownLoad = false;
			// },
			// handleDownLoad() {
			// 	if ( ua.indexOf('Android') > -1 ) {
			// 		window.location.href = 'http://android.myapp.com/myapp/detail.htm?apkName=com.rz.rz_rrz&ADTAG=mobile'
			// 	} else {
			// 		window.location.href = 'https://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=1108712331'
			// 	}
			// }
		},
		// mounted() {
		// 	if (ua.indexOf('Android') > -1 ) {
		// 		this.clipboardUrl = `yryzapp://open/${this.routerAddr}/${this.id}`
		// 	} else {
		// 		this.clipboardUrl = `yryzapp://${this.routerAddr}/${this.id}`
		// 	}

		// 	let clipboard = new Clipboard('.btn', {
		// 		text: function (trigger) {
		// 			let copyUrl =  trigger.getAttribute('copy-conent');
		// 			return copyUrl;
		// 		},
		// 	});

		// 	clipboard.on('success', (e) => {
		// 		this.handleDownLoad();
		// 	});
		// 	clipboard.on('error', (e) => {
		// 		this.handleDownLoad();
		// 	});
		// }
	}
</script>
<style scoped>
	@import '../../css/var.css';
	.appdownload {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		height: 1.71rem;
		/* border-bottom: 1px solid #e7e7e7; */
		padding: 0 0.6rem;
		background: #000 url(../../assets/logo-new@3x.png) no-repeat  0.5rem center;
		background-size: 0.96rem 0.96rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
		z-index: 99;
	}

 	.logo {
		width: 2.8rem;
		height: 0.825rem;
		margin-left: 1.16rem;

		& img {
			width: 100%;
			height: 100%;
		}
	}

	.right {
		display: flex;
	}

	.btn {
		padding: 0 0.51rem;
		height: .81rem;
		background: linear-gradient(to right, #996ce5, #7a32f3);
		font-size: 0.45rem;
		color: #fff;
		text-align: center;
		line-height: 0.81rem;
		border-radius: 0.45rem;
	}

	.icon-close {
		font-size: 0.6rem;
		color:#ddd;
		margin-left: 0.45rem;
	}
</style>